<template>
  <div class="table">
    <div class="handle-box">
      <el-input v-model="selectWord" size="mini" placeholder="请输入歌曲名" class="handle-input" ></el-input>
      <el-button type="primary" size="mini" @click="centerDialogVisible=true">添加歌曲</el-button>
      <el-button type="primary" size="mini" @click="batchDelete">批量删除</el-button>
    </div>
    <el-table size="mini" border style="width: 100%" height="550px" :data="data" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40" ></el-table-column>
      <el-table-column label="歌曲图片" width="110" align="center">
        <template slot-scope="scope">
          <div class="song-img">
            <img :src="getUrl(scope.row.pic)"  style="width: 100% " >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="歌名" width="120" align="center">
      </el-table-column>
      <el-table-column prop="introduction" label="专辑" width="200" align="center">
      </el-table-column>
      <el-table-column label="歌词" align="center" >
        <template slot-scope="scope">
          <ul style="height:100px;overflow:scroll;">
            <li v-for="(item,index) in parseLyric(scope.row.lyric)" :key="index">
              {{item}}
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column label="资源更新" align="center" width="120px">
        <template slot-scope="scope">
          <el-upload :action="uploadUrlForSongAcator(scope.row.id)" :before-upload="beforeSongAvatorUpload" :on-success="avatorUploadSuccess">
            <el-button size="mini" type="primary" >图片更新</el-button>
          </el-upload>
          <br>
          <el-upload :action="uploadUrlForSongSource(scope.row.id)"  :on-success="SongSourceUploadSuccess" accept=".mp3">
            <el-button size="mini" type="primary" >歌曲更新</el-button>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column prop="isVip" label="是否只有会员可听"  width="180" align="center">
        <template slot-scope="scope">
        <el-switch
          v-model="scope.row.vip"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="getChange($event,scope.row.id)">
        </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="操作"  width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini"  type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
        layout = "total,prev,pager,next"
      >
      </el-pagination>
    </div>
   <!-- <el-dialog title="添加歌曲" :visible.sync="centerDialogVisible" width="400px" center>
      <el-form :model="registerForm" ref="registerForm" label-width="80px">
        <div>
          <label>歌名</label>
          <el-input type="text" name="name" ></el-input>
        </div>
        <div>
          <label>专辑</label>
          <el-input type="text" name="introduction" ></el-input>
        </div>
        <div>
          <label>歌词</label>
          <el-input type="textarea" name="lyric" ></el-input>
        </div>
        <div>
          <label>歌曲上传</label>
          <el-input type="file" name="file"></el-input>
        </div>
      </el-form>
      <span slot="footer">
          <el-button size="mini" @click="centerDialogVisible=false">取消</el-button>
          <el-button size="mini" @click="addSong">确定</el-button>
        </span>
    </el-dialog>-->
    <el-dialog title="添加歌曲" :visible.sync="centerDialogVisible" width="400px" center>
      <el-form :model="registerForm" ref="registerForm" label-width="80px">
        <el-form-item prop="singerId" label="歌曲名" size="mini" hidden >
          <el-input v-model="registerForm.singerId" ref="registerFormSingId" ></el-input>
        </el-form-item>
        <el-form-item prop="name" label="歌曲名" size="mini" >
          <el-input v-model="registerForm.name" placeholder="歌曲名"></el-input>
        </el-form-item>
        <el-form-item prop="introduction" label="专辑" size="mini">
        <el-input v-model="registerForm.introduction" placeholder="专辑" type="text"></el-input>
        </el-form-item>
        <el-form-item prop="lyric" label="歌词" size="mini">
          <el-input v-model="registerForm.lyric" placeholder="歌词" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="上传" prop="files">
          <el-upload
            ref="uploads"
            :auto-upload="false"
            class="upload-demo"
            :action=uploadMpUrl()
            :data=this.registerForm
            :on-success="upFile"
            name="file"
            accept=".mp3"
            >
          <el-button size="mini" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
        <span slot="footer">
          <el-button size="mini" @click="centerDialogVisible=false">取消</el-button>
          <el-button size="mini" @click="addSong(registerForm)">确定</el-button>
        </span>
    </el-dialog>
    <el-dialog title="修改歌曲" :visible.sync="EditVisible" width="400px" center>
      <el-form :model="editForm" ref="editForm" label-width="80px">
        <el-form-item prop="name" label="歌曲名" size="mini">
          <el-input v-model="editForm.name" placeholder="歌曲名"></el-input>
        </el-form-item>
        <el-form-item prop="introduction" label="专辑" size="mini">
        <el-input v-model="editForm.introduction" placeholder="专辑" type="text"></el-input>
        </el-form-item>
        <el-form-item prop="lyric" label="歌词" size="mini">
          <el-input v-model="editForm.lyric" placeholder="歌词" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
          <el-button size="mini" @click="EditVisible=false">取消</el-button>
          <el-button size="mini" @click="updateSong">确定</el-button>
        </span>
    </el-dialog>
    <el-dialog title="删除歌曲" :visible.sync="delVisible" width="300px" center>
      <div align="center">删除不可恢复，是否确定删除？</div>
      <el-form :model="delForm" ref="editForm" label-width="80px">
      </el-form>
      <span slot="footer">
                <el-button size="mini" @click="delVisible = false">取消</el-button>
                <el-button size="mini" @click="deleteRow">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "SongManage",
    data(){
      return {
        value:'',
        singerId:'',
        singerName:'',
        centerDialogVisible:false,
        EditVisible:false,
        delVisible:false,
        delForm:{
          id:'',
        },
        editForm:{
          singerId:this.singerId,
          name:'',
          introduction:'',
          lyric:'',
        },
        registerForm:{
          singerId:'',
          name:'',
          introduction:'',
          lyric:'',
        },
        tableData:[],
        templateData:[],
        selectWord:'',
        currentPage:1,
        pageSize:5,
        selectIds:[],
      }
    },
    computed:{
      data(){
        return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize);
      }
    },
    watch:{
      selectWord:function () {
        if(this.selectWord==''){
          this.tableData=this.templateData;
        }else{
          this.tableData=[];
          for(let item of this.templateData){
            if(item.name.includes(this.selectWord)){
              this.tableData.push(item);
            }
          }
        }
      }
    },
    created() {
      this.registerForm.singerId=this.$route.query.id;
      this.singerId=this.$route.query.id;
      this.singerName = this.$route.query.name;
      typeof console.log(this.singerId);
      typeof console.log(this.singerName);
      this.getAllSong();
      console.log(this.tableData);
    },
    methods:{
      getChange($event,id){
        let _this=this;
        let param=new URLSearchParams();
        param.append("isVip",$event);
        param.append("id",id);
        this.$axios.post("http://localhost:8888/song/changeIsVip",param).then(function (data) {
            if(data.data.status==200){
              _this.$notify({
                title: data.data.msg,
                type: 'success'
              });
            }else{
              _this.$notify({
                title: data.data.msg,
                type: 'error'
              });
            }
            _this.getAllSong();
        })
        console.log($event);
        console.log(id);
      },
      addSong(registerForm){
        console.log(registerForm);
        this.$refs.uploads.submit();
      },
      //根据相对地址获取绝对地址
      getUrl(url){
        return `${this.$store.state.HOST}/${url}`
      },
      test(){
        console.log(this.singerId);
      },
      getAllSong(){
        var _this=this;
        this.$axios.get("http://localhost:8888/song/selectSongsBySingerId/"+this.singerId).then(function (data) {
          console.log(data);
          _this.tableData=data.data.object;
          _this.templateData=data.data.object;
        })
      },
      //更新Url
      uploadUrlForSongAcator(id){
        return `${this.$store.state.HOST}/song/updateSongAcator?id=${id}`
      },
      uploadUrlForSongSource(id){
        return `${this.$store.state.HOST}/song/updateSongSource?id=${id}`
      },

      uploadMpUrl(){
        return `${this.$store.state.HOST}/song/addSong`
      },

      handleEdit(row){
        this.EditVisible=true;
        this.editForm  = {
          id:row.id,
          name:row.name,
          singerId:row.singerId,
          lyric:row.lyric,
          introduction:row.introduction,
        }
      },
      handleDelete(row){
        this.delVisible=true;
        this.delForm = {
          id:row.id,
        }
      },
      //解析歌词
      parseLyric(text){
        let lines = text.split("\n");
        let pattern = /\[\d{2}:\d{2}.(\d{3}|\d{2})\]/g;
        let result = [];
        for(let item of lines){
          let value = item.replace(pattern,'');
          result.push(value);
        }
        return result;
      },
      //更新头像之前的校验
      beforeSongAvatorUpload(file){
        const isJPG = (file.type === 'image/jpeg')|| (file.type === 'image/png');
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //上传图片成功之后要做的工作
      avatorUploadSuccess(res){
        let _this = this;
        if(res.status == 200){
          _this.getAllSong();
          _this.$notify({
            title: '上传成功',
            type: 'success'
          });
        }else{
          _this.$notify({
            title: '上传失败',
            type: 'error'
          });
        }
      },
      //更新头像之后
      SongSourceUploadSuccess(res){
        let _this = this;
        if(res.status == 200){
          _this.getAllSong();
          _this.$notify({
            title: '上传成功',
            type: 'success'
          });
        }else{
          _this.$notify({
            title: '上传失败',
            type: 'error'
          });
        }
      },
      deleteRow(){
        var _this=this;
        var id=this.delForm.id;
        this.$axios.delete("http://localhost:8888/song/deleteSong/"+id).then(function (data) {
          if(data.status==200){
            _this.$notify({
              title: '删除成功',
              type: 'success'
            });
            _this.getAllSong();
          }else{
            _this.$notify({
              title: '删除失败',
              type: 'error'
            });
          }
          _this.delVisible=false;
        })
      },
      updateSong(){
        var _this=this;
        this.$axios.post("http://localhost:8888/song/updateSong",this.editForm).then(function (data) {
          if(data.status==200){
            _this.$notify({
              title: '修改成功',
              type: 'success'
            });
            _this.getAllSong();
          }else{
            _this.$notify({
              title: '修改失败',
              type: 'error'
            });
          }
          _this.EditVisible=false;
        })
      },
      handleSelectionChange(val){
        this.selectIds=val;
      },
      batchDelete(){
        var _this=this
        var ids=''
        for(let item of this.selectIds){
          ids=ids+item.id+',';
        }
        this.$axios.delete("http://localhost:8888/song/deleteSongs/"+ids).then(function (data) {
          if(data.status==200){
            _this.$notify({
              title: '删除成功',
              type: 'success'
            });
            _this.getAllSong();
          }else{
            _this.$notify({
              title: '删除失败',
              type: 'error'
            });
          }
        })
      },
      handleCurrentChange(val){
        this.currentPage=val;
      },
      upFile(res){
        console.log(res);
        if (res.status == 200) {
          // 文件上传成功后的回调，比如一些提示信息或者页面跳转都写在这里
          this.$message.success(res.msg);
          this.centerDialogVisible=false;
          this.$refs.registerForm.resetFields();
          this.$refs.uploads.clearFiles();
          this.getAllSong();
        } else {
          this.$message.error(res.msg);
          let _this = this;
       /*   setTimeout(function() {
            _this.$refs.uploads.clearFiles();
          }, 1000);*/
        }
      }
    }
  }
</script>

<style scoped>
  .handle-box{
    margin-bottom: 20px;
  }

  .song-img{
    width: 100%;
    /* height: 40px;*/
    border-radius: 5px;
    border-bottom: 5px;
    overflow: hidden;
  }
  .handle-input{
    width: 300px;
  }
  .pagination{
    display: flex;
    justify-content: center;
  }

</style>
